<template>
  <div ref="canvas" class="RenderArea RenderArea_01_02"></div>
</template>

<script>
// 导入 Three.js 的模块
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export default {
  mounted() {
    const canvas = this.$refs.canvas;

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(
      75, // 相机视锥体垂直视野角度
      canvas.clientWidth / canvas.clientHeight, // 相机视锥体长宽比
      0.1, // 相机视锥体近端面距离
      1000 // 相机视锥体远端面距离
    );
    // 设置相机位置
    camera.position.z = 5;

    // 创建 Three.js 渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });

    // 设置渲染器的背景色和大小
    renderer.setClearColor(0x262626);
    // renderer.setClearColor(0xffffff);
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);

    // 添加坐标系
    const axesHelper = new THREE.AxesHelper(10);
    scene.add(axesHelper);

    // 添加 OrbitControls
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.update();

    // 添加 GLTFLoader
    const loader = new GLTFLoader();

    // 加载 GLTF 模型
    // require('@/views/menu_01/gltf/DamagedHelmet.gltf')
    // '@/views/menu_01/gltf/DamagedHelmet.gltf',
    loader.load(
      'static/DamagedHelmet.gltf',
      function (gltf) {
        scene.add(gltf.scene);
      },
      undefined,
      function (error) {
        console.error(error);
      }
    );

    canvas.appendChild(renderer.domElement);

    function render() {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
      controls.update();
    }

    render();
  },
};
</script>

<style>
/* 设置 Three.js 的渲染画布为页面宽高 */
.RenderArea {
  width: 100%;
  height: 100%;
}
</style>
